<template>
  <page-container>
    <a-spin :spinning="spinning" tip="正在加载...">
      <public-page-search @page-search-change="pageSearchChange"></public-page-search>
      <a-card class="cardHeader" style="height: 100%" size="small">
        <template #title>
          <div class="cardTile">
            <div>
              <img
                src="@/assets/image/statistics/ai.svg"
                alt=""
                style="height: 40px; position: absolute; left: -3px; top: -3px"
              />
              <span style="margin-left: 36px">警情趋势</span>
            </div>
            <div>警情数 : {{ yoyList.caseNum }}</div>
            <div></div>
          </div>
        </template>
        <timeline-chart
          v-if="yoyList?.dataList?.length"
          :data="yoyList.dataList"
          :height="280"
          type="智能"
          :fieldNames="{ name: 'dataDate', values: ['caseNum', 'yoyCaseNum'] }"
          :legend="['当前警情', '去年同期']"
          @zrender:click="timeChartClickHandle"
        />
        <a-empty v-else style="margin-top: 107px" />
      </a-card>
      <a-card>
        <a-row :gutter="10" class="echats" style="margin-top: 22px">
          <a-col :span="8">
            <div class="canvas_box">
              <a-card style="height: 450px" size="small" class="echatsAI">
                <template #title>
                  <span class="iconfont icon-AI"></span>
                  <span class="canvasName" style="margin-left: 50px">【{{ classifyName }}】</span>
                </template>
                <pie-custom
                  v-if="classifyList.length"
                  :data="classifyList"
                  :height="400"
                  :fieldNames="{
                    name: 'classifyName',
                    value: 'caseNum',
                  }"
                  :defalutOptions="classifyOptions"
                  title="警情数量"
                  @zrender:click="classifyPieClick"
                >
                  <template v-slot:titles></template>
                </pie-custom>
                <a-empty style="margin-top: 100px" v-else />
              </a-card>
            </div>
          </a-col>
          <a-col :span="8">
            <div class="canvas_box">
              <a-card style="height: 450px" size="small" class="echatsJie">
                <template #title>
                  <span class="iconfont icon-jiejing"></span>
                  <span class="canvasName" style="margin-left: 50px">接警所覆盖类别</span>
                </template>
                <pie-custom
                  v-if="callList.length"
                  :data="callList"
                  :height="400"
                  :fieldNames="{
                    name: 'callSummaryName',
                    value: 'caseNum',
                  }"
                  :defalutOptions="callOptions"
                  @zrender:click="callPieClick"
                >
                  <template v-slot:title>
                    <span class="callSize">接</span>
                  </template>
                </pie-custom>
                <a-empty style="margin-top: 100px" v-else />
              </a-card>
            </div>
          </a-col>
          <a-col :span="8">
            <div class="canvas_box">
              <a-card style="height: 450px" size="small" class="echatsFan">
                <template #title>
                  <span class="iconfont icon-fankui1"></span>
                  <span class="canvasName" style="margin-left: 50px">反馈所覆盖类别</span>
                </template>
                <pie-custom
                  v-if="dealList.length"
                  :data="dealList"
                  :height="400"
                  :fieldNames="{
                    name: 'dealSummaryName',
                    value: 'caseNum',
                  }"
                  :defalutOptions="dealOptions"
                  @zrender:click="dealPieClick"
                >
                  <template v-slot:title>
                    <span class="dealSize">反</span>
                  </template>
                </pie-custom>
                <a-empty style="margin-top: 100px" v-else />
              </a-card>
            </div>
          </a-col>
        </a-row>
      </a-card>
      <a-card class="statistics cardHeader" :span="20" style="height: 100%" size="small">
        <template #title>
          <div>
            <img
              src="@/assets/image/statistics/ai.svg"
              alt=""
              style="height: 40px; position: absolute; left: -3px; top: -3px"
            />
            <span style="margin-left: 36px">辖区单位统计</span>
          </div>
        </template>
        <bar
          :data="xqdwList"
          :height="300"
          type="智能"
          :fieldNames="{
            name: 'xqdwName',
            value: 'caseNum',
          }"
          @zrender:click="chartClickHandleTimexq"
          v-if="xqdwList.length"
        />
        <a-empty v-else style="margin-top: 60px" />
      </a-card>
      <!-- 警情列表 -->
      <police-list-drawer
        v-model:visible="tabVisible"
        :title="titleData"
        :tabs="policeTabs"
      ></police-list-drawer>
    </a-spin>
  </page-container>
</template>
<script lang="ts">
import { defineComponent, reactive, ref, onUnmounted, toRaw } from 'vue';
import bar from '@/components/charts/bar/index.vue';
import PublicPageSearch from '@/views/intelligent-analysis/components/public-page-search/index.vue';
import TimelineChart from '@/components/charts/line/index.vue';
import { queryBarStat } from '@/api/intelligentanalysis/echarts';
import PoliceListDrawer from '@/components/police-list-drawer/index.vue';
import moment from 'moment';
import { PublicQueryState } from '@/views/intelligent-analysis/typing';
import { getInitParams } from '@/views/intelligent-analysis/js/publicQuery';
import PieCustom from '@/views/early-warning/four-color-warning/components/early-warning-pie.vue';
import { classifyOptions, callOptions, dealOptions } from '@/views/early-warning/js/pieStyle';
import { isNil, omit } from 'lodash';
export default defineComponent({
  name: 'chart-research',
  components: { TimelineChart, bar, PieCustom, PoliceListDrawer, PublicPageSearch },
  setup() {
    const queryForm: PublicQueryState = reactive(getInitParams('statistics'));
    const policeTabs = ref<Array<any>>([]);
    const dateFormat = 'YYYY-MM-DD HH:mm:ss';
    const classifyName = ref('全部');
    const tabVisible = ref<boolean>(false);
    const titleData = ref<string>('');
    const yoyList = ref<any>([]);
    const xqdwList = ref<any>([]);

    const classifyList = ref<any>([]);
    const callList = ref<any>([]);
    const dealList = ref<any>([]);

    const spinning = ref<boolean>(true);

    const hnadlequeryBarStat = () => {
      spinning.value = true;
      queryBarStat(toRaw(queryForm))
        .then(res => {
          yoyList.value = res.data.yoyList;
          xqdwList.value = res.data.xqdwList;
          classifyList.value = res.data.pieClassify;
          callList.value = res.data.pieCall;
          dealList.value = res.data.pieDeal;
        })
        .finally(() => {
          spinning.value = false;
        });
    };

    // 智能饼图点击
    const classifyPieClick = e => {
      const dataIndex = e?.target?.dataIndex;
      if (!isNil(dataIndex)) {
        titleData.value = classifyList.value[dataIndex]?.classifyName;
        const classifyCodes = classifyList.value[dataIndex]?.classifyCode;
        const paramsList = [
          {
            url: '/aitype/caseInfo/queryCaseInfo',
            params: reactive({
              ...queryForm,
              classifyCodes,
              page: 1,
              size: 50,
            }),
            type: 'ai',
          },
        ];
        policeTabs.value = paramsList;
        tabVisible.value = true;
      }
    };

    // 接警饼图点击
    const callPieClick = e => {
      const dataIndex = e?.target?.dataIndex;
      if (!isNil(dataIndex)) {
        titleData.value = callList.value[dataIndex].callSummaryName;
        const callSummaryCode = callList.value[dataIndex].callSummaryCode;
        const paramsList = [
          {
            url: '/aitype/caseInfo/queryCaseInfo',
            params: reactive({
              ...omit(queryForm, ['classifyNames', 'callSummaryCodes', 'themeCode']),
              callSummaryCode,
              page: 1,
              size: 50,
            }),
            type: 'ai',
          },
        ];
        policeTabs.value = paramsList;
        tabVisible.value = true;
      }
    };

    // 反馈饼图点击
    const dealPieClick = e => {
      const dataIndex = e?.target?.dataIndex;
      if (!isNil(dataIndex)) {
        titleData.value = dealList.value[dataIndex]?.dealSummaryName;
        const dealSummaryCode = dealList.value[dataIndex]?.dealSummaryCode;
        const paramsList = [
          {
            url: '/aitype/caseInfo/queryCaseInfo',
            params: reactive({
              ...omit(queryForm, ['classifyNames', 'dealSummaryCodes', 'themeCode']),
              dealSummaryCode,
              page: 1,
              size: 50,
            }),
            type: 'ai',
          },
        ];
        policeTabs.value = paramsList;
        tabVisible.value = true;
      }
    };

    //辖区单位统计
    const chartClickHandleTimexq = e => {
      titleData.value = xqdwList.value[e].xqdwName;
      const xqdwCode = xqdwList.value[e].xqdwCode;
      const paramsList = [
        {
          url: '/aitype/caseInfo/queryCaseInfo',
          params: reactive({
            ...omit(queryForm, ['classifyNames', 'xqdwCodes', 'themeCode']),
            xqdwCode,
            page: 1,
            size: 50,
          }),
          type: 'ai',
        },
      ];
      policeTabs.value = paramsList;
      tabVisible.value = true;
    };

    //折线图点击事件
    const timeChartClickHandle = (index, item) => {
      titleData.value = item.dataDate;
      const dataStart = `${item.dataDate} 00:00:00`;
      const dataEnd = `${item.dataDate} 23:59:59`;
      const lastYearStart = moment(dataStart).subtract(1, 'year').format(dateFormat);
      const lastYearEnd = moment(dataEnd).subtract(1, 'year').format(dateFormat);
      const paramsList = [
        {
          name: '当期警情',
          url: '/aitype/caseInfo/queryCaseInfo',
          params: reactive({
            ...queryForm,
            callTimeStart: dataStart,
            callTimeEnd: dataEnd,
            page: 1,
            size: 50,
          }),
          type: 'ai',
        },
        {
          name: '去年同期',
          url: '/aitype/caseInfo/queryCaseInfo',
          params: reactive({
            ...queryForm,
            callTimeStart: lastYearStart,
            callTimeEnd: lastYearEnd,
            page: 1,
            size: 50,
          }),
          type: 'ai',
        },
      ];

      policeTabs.value = paramsList;
      tabVisible.value = true;
    };
    const pageSearchChange = params => {
      Object.keys(queryForm).forEach(key => {
        Object.prototype.hasOwnProperty.call(params, key) && (queryForm[key] = params[key]);
      });
      classifyName.value = params.classifyNames || '全部';
      hnadlequeryBarStat();
    };

    onUnmounted(() => {});
    return {
      classifyName,
      spinning,
      xqdwList,
      yoyList,
      queryForm,
      policeTabs,
      tabVisible,
      titleData,
      timeChartClickHandle,
      chartClickHandleTimexq,
      pageSearchChange,
      classifyOptions,
      callOptions,
      dealOptions,
      classifyList,
      callList,
      dealList,
      classifyPieClick,
      callPieClick,
      dealPieClick,
    };
  },
});
</script>
<style lang="less" scoped>
.echats {
  :deep(.ant-card-small > .ant-card-head) {
    background: #34363c;
  }
}
.echatsAI {
  :deep(.ant-card-head) {
    color: #e99220;
    border: 1px solid #e99220;
  }
}
.echatsJie {
  :deep(.ant-card-head) {
    color: #1ccaff;
    border: 1px solid #1ccaff;
  }
}
.echatsFan {
  :deep(.ant-card-head) {
    color: #3191ff;
    border: 1px solid #3191ff;
  }
}
.callSize {
  color: rgba(9, 65, 82, 1);
  font-size: 70px;
  text-shadow: -1px 0 rgba(28, 202, 255, 1), 0 1px rgba(28, 202, 255, 1),
    1px 0 rgba(28, 202, 255, 1), 0 -1px rgba(28, 202, 255, 1);
}
.dealSize {
  color: rgba(20, 55, 96, 1);
  font-size: 70px;
  text-shadow: -1px 0 rgba(49, 145, 255, 1), 0 1px rgba(49, 145, 255, 1),
    1px 0 rgba(49, 145, 255, 1), 0 -1px rgba(49, 145, 255, 1);
}
.icon-AIjiaobiao:before {
  content: '\e6ad';
}
.icon-AI:before {
  position: absolute;
  top: 10px;
  left: 0px;
  color: #e99220;
  font-size: 38px;
  content: '\e6ac';
}
.icon-jiejing:before {
  position: absolute;
  top: 10px;
  left: 0px;
  color: #1ccaff;
  font-size: 38px;
  content: '\e6b1';
}
.icon-fankui1:before {
  position: absolute;
  top: 10px;
  left: 0px;
  color: #3191ff;
  font-size: 38px;
  content: '\e6b2';
}
.handleIcon {
  position: absolute;
  top: -2px;
  left: -2px;
  z-index: 9;
  color: #e99220;
  font-size: 40px;
}
:deep(.ant-card-head) {
  font-weight: 400;
  font-size: 18px;
  font-family: Source Han Sans CN;
  line-height: 22px;
  border-bottom: 0;
  border-radius: 0px;
}
.cardTile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 4px;
}
:deep(.cardHeader .ant-card-head) {
  height: 48px;
  font-size: 14px;
  background: #34363c;
  border-bottom: 0.8px solid rgba(76, 84, 107, 0.75);
}
:deep(.statistics .ant-card-head-wrapper) {
  padding-top: 4px;
}
</style>
